<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>社区文章管理</title>
  <!-- 引入layui CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
  <!-- 引入Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <!-- 引入ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    body {
      background-color: #F8FAFC;
      padding: 20px;
      margin: 0;
    }
    .layui-card {
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 20px;
    }
    .layui-card:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    .layui-card-header {
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .search-bar {
      padding: 15px 20px;
      background-color: #F8FAFC;
      border-bottom: 1px solid #F1F5F9;
    }
    .layui-form-item {
      margin-bottom: 15px;
    }
    .layui-form-label {
      padding: 9px 15px;
      color: #334155;
      font-weight: 500;
    }
    .layui-input, .layui-select, .layui-textarea {
      border-radius: 4px;
      padding: 9px 15px;
    }
    .layui-btn {
      transition: all 0.2s;
      border-radius: 4px;
      cursor: pointer;
    }
    .layui-btn-primary:hover {
      background-color: #F1F5F9;
      color: #1E293B;
    }
    .layui-btn-normal:hover {
      background-color: #3B82F6;
    }
    .layui-table {
      margin: 0;
      border-radius: 0 0 6px 6px;
    }
    .layui-table th {
      font-weight: 500;
      background-color: #F8FAFC;
    }
    .layui-table tr:hover {
      background-color: #F8FAFC;
    }
    .status-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 15px;
      font-size: 12px;
      font-weight: 500;
    }
    .status-published {
      background-color: #ECFDF5;
      color: #059669;
      border: 1px solid #D1FAE5;
    }
    .status-draft {
      background-color: #EFF6FF;
      color: #3B82F6;
      border: 1px solid #DBEAFE;
    }
    .status-rejected {
      background-color: #FEE2E2;
      color: #DC2626;
      border: 1px solid #FECACA;
    }
    .status-pending {
      background-color: #FEF3C7;
      color: #D97706;
      border: 1px solid #FDE68A;
    }
    .operation-btns .layui-btn {
      margin-right: 5px;
    }
    .operation-btns .layui-btn:last-child {
      margin-right: 0;
    }
    .footer {
      text-align: center;
      color: #95A5A6;
      font-size: 12px;
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #F1F5F9;
    }
    .layui-laypage .layui-laypage-curr .layui-laypage-em {
      background-color: #3B82F6;
    }
    .layui-laypage a:hover {
      color: #3B82F6;
    }
    .chart-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }
    .chart-item {
      flex: 1;
      min-width: 300px;
      height: 300px;
    }
    .article-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0 20px 15px;
    }
    .stat-item {
      flex: 1;
      min-width: 150px;
      background-color: #FFFFFF;
      border-radius: 6px;
      padding: 15px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    .stat-value {
      font-size: 24px;
      font-weight: 600;
      color: #1E293B;
      margin: 5px 0;
    }
    .stat-label {
      font-size: 14px;
      color: #64748B;
    }
    .stat-icon {
      font-size: 20px;
    }
    .hot-tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 4px;
      margin-bottom: 4px;
      background-color: #F1F5F9;
      color: #475569;
    }
    .article-title {
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <!-- 统计卡片 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-bar-chart"></i> 社区文章统计</h3>
    </div>
    <div class="layui-card-body">
      <div class="article-stats">
        <div class="stat-item">
          <div class="stat-icon" style="color: #3B82F6;"><i class="fa fa-file-text-o"></i></div>
          <div class="stat-value">1,284</div>
          <div class="stat-label">总文章数</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #10B981;"><i class="fa fa-check-circle-o"></i></div>
          <div class="stat-value">967</div>
          <div class="stat-label">已发布</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #F59E0B;"><i class="fa fa-clock-o"></i></div>
          <div class="stat-value">156</div>
          <div class="stat-label">待审核</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #EF4444;"><i class="fa fa-times-circle-o"></i></div>
          <div class="stat-value">161</div>
          <div class="stat-label">草稿/下架</div>
        </div>
        <div class="stat-item">
          <div class="stat-icon" style="color: #8B5CF6;"><i class="fa fa-eye"></i></div>
          <div class="stat-value">45,892</div>
          <div class="stat-label">总浏览量</div>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <div class="chart-container">
        <div class="chart-item" id="publishTrendChart"></div>
        <div class="chart-item" id="categoryPieChart"></div>
      </div>
    </div>
  </div>

  <!-- 文章管理主内容区域 -->
  <div class="layui-card">
    <div class="layui-card-header">
      <h3><i class="fa fa-newspaper-o"></i> 社区文章管理</h3>
      <button class="layui-btn layui-btn-normal" id="addArticleBtn">
        <i class="fa fa-plus"></i> 新增文章
      </button>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-bar layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">文章标题</label>
          <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="articleTitle" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">作者</label>
          <div class="layui-input-inline" style="width: 150px;">
            <input type="text" name="author" placeholder="请输入作者" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">文章状态</label>
          <div class="layui-input-inline">
            <select name="status">
              <option value="">全部状态</option>
              <option value="published">已发布</option>
              <option value="pending">待审核</option>
              <option value="draft">草稿</option>
              <option value="rejected">已拒绝</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">文章分类</label>
          <div class="layui-input-inline">
            <select name="category">
              <option value="">全部分类</option>
              <option value="technology">技术分享</option>
              <option value="research">研究进展</option>
              <option value="education">教学经验</option>
              <option value="discussion">学术讨论</option>
              <option value="activity">活动通知</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">发布时间</label>
          <div class="layui-input-inline" style="width: 220px;">
            <input type="text" name="publishTimeRange" placeholder="请选择发布时间范围" autocomplete="off" class="layui-input" id="publishTimeRange">
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn" lay-submit lay-filter="searchBtn"><i class="fa fa-search"></i> 搜索</button>
          <button type="reset" class="layui-btn layui-btn-primary"><i class="fa fa-refresh"></i> 重置</button>
        </div>
      </div>
    </div>
    
    <!-- 文章列表表格 -->
    <table class="layui-table" lay-size="sm">
      <thead>
        <tr>
          <th style="width: 40px;">
            <input type="checkbox" lay-skin="primary" id="checkAll">
          </th>
          <th>文章ID</th>
          <th>标题</th>
          <th>作者</th>
          <th>分类</th>
          <th>标签</th>
          <th>发布时间</th>
          <th>浏览量</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="2001">
          </td>
          <td>ART2023001</td>
          <td>
            <div class="article-title" title="深度学习在图像识别中的最新进展与应用">深度学习在图像识别中的最新进展与应用</div>
          </td>
          <td>张教授</td>
          <td>技术分享</td>
          <td>
            <span class="hot-tag">深度学习</span>
            <span class="hot-tag">图像识别</span>
            <span class="hot-tag">AI</span>
          </td>
          <td>2023-09-15 09:23</td>
          <td>1,258</td>
          <td><span class="status-badge status-published">已发布</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="2001"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="2001"><i class="fa fa-edit"></i> 编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="2001"><i class="fa fa-trash"></i> 删除</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="2002">
          </td>
          <td>ART2023002</td>
          <td>
            <div class="article-title" title="高校科研项目管理系统的设计与实现">高校科研项目管理系统的设计与实现</div>
          </td>
          <td>李工程师</td>
          <td>技术分享</td>
          <td>
            <span class="hot-tag">系统设计</span>
            <span class="hot-tag">科研管理</span>
            <span class="hot-tag">Web开发</span>
          </td>
          <td>2023-09-12 14:56</td>
          <td>892</td>
          <td><span class="status-badge status-published">已发布</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="2002"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="2002"><i class="fa fa-edit"></i> 编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="2002"><i class="fa fa-trash"></i> 删除</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="2003">
          </td>
          <td>ART2023003</td>
          <td>
            <div class="article-title" title="2023年度人工智能领域学术会议汇总">2023年度人工智能领域学术会议汇总</div>
          </td>
          <td>王副教授</td>
          <td>活动通知</td>
          <td>
            <span class="hot-tag">学术会议</span>
            <span class="hot-tag">人工智能</span>
            <span class="hot-tag">学术交流</span>
          </td>
          <td>2023-09-10 11:32</td>
          <td>1,567</td>
          <td><span class="status-badge status-published">已发布</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="2003"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="2003"><i class="fa fa-edit"></i> 编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="2003"><i class="fa fa-trash"></i> 删除</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="2004">
          </td>
          <td>ART2023004</td>
          <td>
            <div class="article-title" title="大数据分析在科研项目评估中的应用研究">大数据分析在科研项目评估中的应用研究</div>
          </td>
          <td>赵教授</td>
          <td>研究进展</td>
          <td>
            <span class="hot-tag">大数据</span>
            <span class="hot-tag">项目评估</span>
            <span class="hot-tag">科研管理</span>
          </td>
          <td>2023-09-08 09:15</td>
          <td>753</td>
          <td><span class="status-badge status-pending">待审核</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="2004"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="2004"><i class="fa fa-edit"></i> 编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="2004"><i class="fa fa-trash"></i> 删除</button>
          </td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" lay-skin="primary" data-id="2005">
          </td>
          <td>ART2023005</td>
          <td>
            <div class="article-title" title="研究生学术论文写作指南">研究生学术论文写作指南</div>
          </td>
          <td>陈教授</td>
          <td>教学经验</td>
          <td>
            <span class="hot-tag">论文写作</span>
            <span class="hot-tag">研究生</span>
            <span class="hot-tag">学术规范</span>
          </td>
          <td>2023-09-05 16:42</td>
          <td>2,154</td>
          <td><span class="status-badge status-rejected">已拒绝</span></td>
          <td class="operation-btns">
            <button class="layui-btn layui-btn-primary layui-btn-sm" data-id="2005"><i class="fa fa-eye"></i> 查看</button>
            <button class="layui-btn layui-btn-normal layui-btn-sm" data-id="2005"><i class="fa fa-edit"></i> 编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" data-id="2005"><i class="fa fa-trash"></i> 删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    
    <!-- 分页区域 -->
    <div style="text-align: right; padding: 15px 20px; border-top: 1px solid #F1F5F9;">
      <div class="layui-box layui-laypage layui-laypage-default">
        <a href="javascript:;" class="layui-laypage-prev layui-disabled">上一页</a>
        <span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>1</em></span>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <span class="layui-laypage-spr">…</span>
        <a href="javascript:;">13</a>
        <a href="javascript:;" class="layui-laypage-next">下一页</a>
        <span class="layui-laypage-count">共 1284 条</span>
      </div>
    </div>
  </div>
  
  <!-- 页脚信息 -->
  <div class="footer">
    © 高校科研社区管理系统 - 版权所有
  </div>

  <!-- 引入layui JS -->
  <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
  <script>
    // 初始化layui模块
    layui.use(['form', 'laydate', 'layer'], function() {
      const form = layui.form;
      const laydate = layui.laydate;
      const layer = layui.layer;
      
      // 渲染表单
      form.render();
      
      // 初始化日期范围选择器
      laydate.render({
        elem: '#publishTimeRange',
        range: true,
        theme: 'molv'
      });
      
      // 全选/取消全选
      form.on('checkbox(#checkAll)', function(data) {
        const checked = data.elem.checked;
        document.querySelectorAll('tbody [type="checkbox"]').forEach(checkbox => {
          checkbox.checked = checked;
        });
        form.render('checkbox');
      });
      
      // 搜索按钮
      form.on('submit(searchBtn)', function(data) {
        // 模拟搜索操作
        layer.msg('搜索条件已提交', {icon: 0, time: 1000});
        return false;
      });
      
      // 查看文章
      document.querySelectorAll('.operation-btns .layui-btn-primary:first-child').forEach(btn => {
        btn.addEventListener('click', function() {
          const articleId = this.getAttribute('data-id');
          const articleTitle = this.closest('tr').querySelector('.article-title').title;
          
          layer.open({
            title: articleTitle,
            type: 1,
            content: `<div style="padding: 20px; max-height: 500px; overflow-y: auto;">
              <p><strong>文章ID:</strong> ${articleId}</p>
              <p><strong>发布时间:</strong> ${this.closest('tr').querySelector('td:nth-child(7)').innerText}</p>
              <p><strong>作者:</strong> ${this.closest('tr').querySelector('td:nth-child(4)').innerText}</p>
              <p><strong>分类:</strong> ${this.closest('tr').querySelector('td:nth-child(5)').innerText}</p>
              <hr>
              <div style="margin-top: 15px;">
                <h4 style="margin-bottom: 10px;">内容预览:</h4>
                <p>这是"${articleTitle}"的内容预览。实际应用中，这里将显示完整的文章内容，包括文字、图片、表格等富媒体内容。</p>
                <p style="margin-top: 10px;">文章内容将支持富文本格式，包括标题层级、列表、引用、代码块等学术文章常用格式。</p>
              </div>
              <div style="margin-top: 20px; padding-top: 10px; border-top: 1px dashed #E2E8F0;">
                <strong>浏览量:</strong> ${this.closest('tr').querySelector('td:nth-child(8)').innerText}
              </div>
            </div>`,
            area: ['800px', '600px']
          });
        });
      });
      
      // 编辑文章
      document.querySelectorAll('.operation-btns .layui-btn-normal').forEach(btn => {
        btn.addEventListener('click', function() {
          const articleId = this.getAttribute('data-id');
          const articleTitle = this.closest('tr').querySelector('.article-title').title;
          
          layer.open({
            title: '编辑文章: ' + articleTitle,
            type: 1,
            content: `<div style="padding: 20px;">
              <form class="layui-form">
                <div class="layui-form-item">
                  <label class="layui-form-label">文章标题</label>
                  <div class="layui-input-block">
                    <input type="text" value="${articleTitle}" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">文章分类</label>
                  <div class="layui-input-block">
                    <select>
                      <option value="technology">技术分享</option>
                      <option value="research">研究进展</option>
                      <option value="education">教学经验</option>
                      <option value="discussion">学术讨论</option>
                      <option value="activity">活动通知</option>
                    </select>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">标签</label>
                  <div class="layui-input-block">
                    <input type="text" placeholder="请输入标签，用逗号分隔" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">文章内容</label>
                  <div class="layui-input-block">
                    <textarea class="layui-textarea" rows="10" placeholder="请输入文章内容"></textarea>
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">文章状态</label>
                  <div class="layui-input-block">
                    <select>
                      <option value="published">已发布</option>
                      <option value="pending">待审核</option>
                      <option value="draft">草稿</option>
                    </select>
                  </div>
                </div>
              </form>
            </div>`,
            area: ['900px', '700px'],
            btn: ['保存', '取消'],
            yes: function(index) {
              layer.msg('文章已保存', {icon: 1, time: 1500});
              layer.close(index);
            }
          });
        });
      });
      
      // 删除文章
      document.querySelectorAll('.operation-btns .layui-btn-danger').forEach(btn => {
        btn.addEventListener('click', function() {
          const articleId = this.getAttribute('data-id');
          const articleTitle = this.closest('tr').querySelector('.article-title').title;
          
          layer.confirm(`确定要删除文章"${articleTitle}"吗？此操作不可恢复。`, {
            btn: ['确定删除', '取消']
          }, function() {
            // 模拟删除操作
            layer.msg('文章已删除', {icon: 1, time: 1500});
          });
        });
      });
      
      // 新增文章按钮
      document.getElementById('addArticleBtn').addEventListener('click', function() {
        layer.open({
          title: '新增社区文章',
          type: 1,
          content: `<div style="padding: 20px;">
            <form class="layui-form">
              <div class="layui-form-item">
                <label class="layui-form-label">
                  <span style="color: #F56C6C;">*</span>文章标题
                </label>
                <div class="layui-input-block">
                  <input type="text" placeholder="请输入文章标题" class="layui-input" lay-verify="required">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">
                  <span style="color: #F56C6C;">*</span>文章分类
                </label>
                <div class="layui-input-block">
                  <select lay-verify="required">
                    <option value="">请选择分类</option>
                    <option value="technology">技术分享</option>
                    <option value="research">研究进展</option>
                    <option value="education">教学经验</option>
                    <option value="discussion">学术讨论</option>
                    <option value="activity">活动通知</option>
                  </select>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">标签</label>
                <div class="layui-input-block">
                  <input type="text" placeholder="请输入标签，用逗号分隔" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">
                  <span style="color: #F56C6C;">*</span>文章内容
                </label>
                <div class="layui-input-block">
                  <textarea class="layui-textarea" rows="10" placeholder="请输入文章内容" lay-verify="required"></textarea>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">发布状态</label>
                <div class="layui-input-block">
                  <select>
                    <option value="published">直接发布</option>
                    <option value="pending" selected>提交审核</option>
                    <option value="draft">保存为草稿</option>
                  </select>
                </div>
              </div>
            </form>
          </div>`,
          area: ['900px', '700px'],
          btn: ['发布', '保存草稿', '取消'],
          btn1: function(index) {
            layer.msg('文章已提交发布', {icon: 1, time: 1500});
            layer.close(index);
          },
          btn2: function(index) {
            layer.msg('文章已保存为草稿', {icon: 0, time: 1500});
            layer.close(index);
            return false;
          }
        });
      });
      
      // 初始化ECharts图表
      initCharts();
    });
    
    // 初始化图表
    function initCharts() {
      // 1. 文章发布趋势图
      const trendChart = echarts.init(document.getElementById('publishTrendChart'));
      
      const trendOption = {
        title: {
          text: '近6个月文章发布趋势',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['已发布', '待审核'],
          bottom: 0
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['4月', '5月', '6月', '7月', '8月', '9月']
        },
        yAxis: {
          type: 'value',
          name: '文章数量'
        },
        series: [
          {
            name: '已发布',
            type: 'bar',
            data: [120, 150, 180, 165, 210, 190],
            itemStyle: {
              color: '#3B82F6'
            }
          },
          {
            name: '待审核',
            type: 'bar',
            data: [30, 45, 35, 50, 40, 55],
            itemStyle: {
              color: '#F59E0B'
            }
          }
        ]
      };
      
      trendChart.setOption(trendOption);
      
      // 2. 文章分类占比图
      const categoryChart = echarts.init(document.getElementById('categoryPieChart'));
      
      const categoryOption = {
        title: {
          text: '文章分类占比',
          left: 'center',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          bottom: 0,
          top: 'middle'
        },
        series: [
          {
            name: '文章分类',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 350, name: '技术分享' },
              { value: 280, name: '研究进展' },
              { value: 220, name: '教学经验' },
              { value: 180, name: '学术讨论' },
              { value: 154, name: '活动通知' }
            ],
            color: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899']
          }
        ]
      };
      
      categoryChart.setOption(categoryOption);
      
      // 响应窗口大小变化，重绘图表
      window.addEventListener('resize', function() {
        trendChart.resize();
        categoryChart.resize();
      });
    }
  </script>
</body>
</html>
